<template>
	<common-page>
		<view class="page-title margin-top-32 font-28" style="color: #1E2531;font-weight: bold;">安装方式</view>
		<image src="../../static/install_bg.jpg" mode="" style="width: 100%;height: 332rpx;margin-top: 28rpx;"></image>
		<view class="page-content-box">
			<view class="title font-30" style="color: #4B4D5E;font-weight: bold;">安装说明</view>
			<view class="txt font-24" style="color: #9FA2B4;margin-top: 4rpx;">
				勿安装在高温源(如暖气片、白炽灯)附近;不宜安装在吊扇、吊
				灯等遮挡物旁:0.7米范围内无窗帘、空调、风扇等运动物体干
				扰；
			</view>
		</view>
		<u-subsection
			:list="list" mode="button" :current="currentIndex"
			activeColor="#fff" inactiveColor="#333333"
			fontSize="30rpx"
			keyName="label"
			@change="bindSectionChange"
		></u-subsection>
		<view class="btn-next">
			<u-button type="primary" text="继续" color="#417CE9" @click="bindGoToNext"></u-button>
		</view>
	</common-page>
</template>

<script>
export default {
	data() {
		return {
			list: [{
				label: '顶装'
			}, {
				label: '侧装'
			}],
			currentIndex: 0
		};
	},
	methods: {
		// 选择安装方式
		bindSectionChange(ev) {
			this.currentIndex = ev;
		},
		// 下一步
		bindGoToNext() {
			this.$store.commit('addDevice/SET_DEVICE_PARAMAS', {
				key: 'installMode',
				value: !!this.currentIndex
			});
			uni.navigateTo({
				url: '/pages/device/add2'
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.page-content-box {
	padding: 27rpx 22rpx;
	background-color: #fff;
	border-radius: 16rpx;
	margin-top: 28rpx;
}
::v-deep .u-subsection {
	height: 66rpx !important;
	border-radius: 66rpx !important;
	padding: 0 !important;
	margin-top: 24rpx !important;
	.u-subsection__bar {
		border-radius: 66rpx !important;
		background-color: #417CE9;
		height: 66rpx !important;
	}
}
.btn-next {
	position: fixed;
	bottom: 80rpx;
	left: 32rpx;
	right: 32rpx;
	::v-deep .u-button {
		border-radius: 60rpx !important;
		&.u-button--disabled {
			background-color: #D7D7D7 !important;
			border-color: #D7D7D7 !important;
		}
		.u-button__text {
			font-size: 32rpx !important;
			font-weight: bold;
		}
	}
}
</style>
